<template>
    <div id="home" >
        <div align="left" style="float:left;margin-left:130px;margin-top:10px" >
            <router-link to="/myCodeTxt" style="text-decoration: none;color:black">
                <img src="@/assets/index.png" width="30px" height="20px" style="vertical-align:middle;"/>
                <span style="color:#a4a2a2" >首页</span>
            </router-link>
        </div>

        <el-header style="text-align: right; font-size: 14px;margin-left:100px;margin-top:-50px;margin-right:100px;height:40px;line-height: 44px;">
            
            <div style="display:inline-block">
                <!-- <router-link to="/myRichEditor" style="text-decoration: none;color:black">
                    <i class="el-icon-edit"></i>
                    写博客
                </router-link> -->

                <div style="display:inline-block;cursor:pointer" @click="writeBlog()">
                    <i class="el-icon-edit"></i>
                    写博客
                </div>
                

            </div>
            <div  style="display:inline-block;margin-left:5px">
                <i class="el-icon-message-solid"></i>&nbsp;
            </div>
            <div  style="display:inline-block;cursor:pointer">
                <router-link to="/person" style="text-decoration: none;color:black">
                     {{username}}
                </router-link>
                <span style="color:#a2a2a2"  @click="removeUserInfo()" v-if="username">退出</span>
                <router-link to="/login" style="text-decoration: none;color:black" v-if="!username">
                    登录 / 注册
                </router-link>
            </div>
        </el-header>

        <el-container style="height: 640px;">
            <el-aside width="100px" style="background-color: white;margin-left:100px;border: 1px solid #eee">
                <el-menu  >
                    <el-menu-item-group>
                        
                            <router-link to="/myCodeTxt" style="text-decoration: none;">
                                <el-menu-item index="1-1" >日志</el-menu-item>
                            </router-link>

                            <ul>
                                <li  v-for="(item,key) in articleTypes" style="text-align:center;padding:0;list-style:none">
                                    <router-link :to="'/articleList/'+item.name" style="text-decoration: none;">
                                        <el-menu-item  :index = item.name >{{item.name}}</el-menu-item>
                                    </router-link>
                                </li>
                            </ul>
                            
                    </el-menu-item-group>
                </el-menu>
            </el-aside>
        
            <el-container style="margin-left:8px;margin-right:8px;margin-top:5px;" class="contain">
                <el-main >
                    <router-view/>
                </el-main>
            </el-container>

            <el-aside width="250px" style="margin-right:100px;margin-top:5px;">
                <video src="@/assets/video/front_video.mp4" controls="controls" height="150" width="200"></video>
            </el-aside>

            

        </el-container>

        <el-backtop ></el-backtop>
    </div>
</template>

<script>
import storage from '@/router/storage.js'
export default {
    data(){
        return{
            'username':'',
            'articleTypes':''
        }
    },
    methods:{
        //查询所有 文章类型
        getArticleTypes(){
            this.axios.post('/articleType/getArticleTypesForHome').then(response=> {
                if(response.data.code == 500){
                    this.$message({
                        type: 'warning ',
                        message: response.data.message
                    }); 
                }else{
                    console.log(response.data.data);
                    this.articleTypes = response.data.data
                }
            }).catch(error => {
                
            });
        },

        writeBlog(){
            if(this.username == undefined || this.username ==""){
                this.$message({
                    type: 'warning',
                    message: '请先登陆/注册'
                }); 
                return false;
            }

            this.$router.push({path:'/myRichEditor'});
        },


        //注销清除localstorage中的数据
        removeUserInfo(){
            storage.remove("username");
            this.username = "";

            //后台session清除
            this.axios.post('/user/loginOut').then(response=> {
                if(response.data.code == 500){
                    this.$message({
                        type: 'warning ',
                        message: response.data.message
                    }); 
                }else{
                    
                }
            }).catch(error => {
                
            });
        },
    },
    mounted(){
        console.log(this.$route.params.username);
        this.username = this.$route.params.username;

        //从localStorage中拿到用户信息
        var username = storage.get("username");
        if(username){
            this.username = username;    
        }
        this.getArticleTypes();

    }
}
</script>

<style  scoped>
.contain{
    background-image:url(../assets/back_img.png)
}
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 30px;
}

.el-aside {
    color: #333;
}


</style>
